<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的关注</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	</head>
	<style>
		body{
			    font-family: 'Helvetica Neue',Helvetica,sans-serif;
			    font-size: 17px;
			    line-height: 21px;
			    color: #000;
			    margin: 0px;
			    padding: 0px;
			}
		.mui-bar-nav {
				    top: 0;
				    -webkit-box-shadow: 0 1px 6px #ccc;
				    box-shadow: 0 1px 6px #ccc;
				}
				
				.mui-bar {
				    position: fixed;
				    z-index: 10;
				    right: 0;
				    left: 0;
				    height: 44px;
				    padding-right: 10px;
				    padding-left: 10px;
				    border-bottom: 0;
				    background-color:RGB(88,88,88);
				}
				
				.mui-bar-nav.mui-bar .mui-icon {
				    /*margin-right: -10px;*/
				    margin-left: -10px;
				    padding-right: 10px;
				    padding-left: 10px;
				}
				.mui-bar .mui-icon {
				    font-size: 24px;
				    position: relative;
				    z-index: 20;
				    padding-top: 10px;
				    padding-bottom: 10px;
				}
				
				.mui-pull-left {
				    float: left;
				}
				a {
				    text-decoration: none;
				    color: #FC605A;
				}
				a {
				    background: 0 0;
				}
				
				.mui-bar .mui-title {
				    right: 201px;
				    left: 40px;
				    top: 4px;
				    display: inline-block;
				    overflow: hidden;
				    width: auto;
				    margin: 0;
				    text-overflow: ellipsis;
				}
				.mui-title {
				    font-size: 17px;
				    font-weight: 500;
				    line-height: 44px;
				    position: absolute;
				    display: block;
				    width: 100%;
				    margin: 0 -10px;
				    padding: 0;
				    text-align: center;
				    white-space: nowrap;
				    color: #fff;
				}
				.pattern-list {
				    width: 100%;
				    margin: 0;
				    margin-top: -10px;
				    padding: 0;
				}
				
				ul, li {
				    font-style: normal;
				    list-style: none;
				}
				.mui-card-footer, .mui-card-header {
				    padding: 0;
				}
				.mui-card-footer {
				    color: #6d6d72;
				    border-radius: 0 0 2px 2px;
				}
				.mui-card-footer, .mui-card-header {
				    position: relative;
				    display: -webkit-box;
				    display: -webkit-flex;
				    display: flex;
				    flex-wrap: wrap;
				    min-height: 44px;
				    padding: 10px 15px;
				    -webkit-box-pack: justify;
				    -webkit-justify-content: space-between;
				    justify-content: space-between;
				    -webkit-box-align: center;
				    -webkit-align-items: center;
				    align-items: center;
				}
				.mui-card {
				    font-size: 14px;
				    position: relative;
				    overflow: hidden;
				    margin: 1%;
				    border-radius: 2px;
				    background-color: #fff;
				    background-clip: padding-box;
				    box-shadow: 0 1px 2px rgba(0,0,0,.1);
				    width: 45%;
				}
				a {
				    text-decoration: none;
				    color: #FC605A;
				}
				a {
				    background: 0 0;
				}	
				.mui-card-header.mui-card-media {
				    display: block;
				    padding: 10px;
				}
				.mui-card-footer, .mui-card-header {
				    padding: 0;
				}
				.mui-card-media {
				    vertical-align: bottom;
				    color: #fff;
				    background-position: center;
				    background-size: cover;
				}
				.mui-card-header {
				    font-size: 17px;
				    border-radius: 2px 2px 0 0;
				}
				.mui-card-footer, .mui-card-header {
				    position: relative;
				    display: -webkit-box;
				    display: -webkit-flex;
				    display: flex;
				    flex-wrap: wrap;
				    min-height: 44px;
				    padding: 10px 15px;
				    -webkit-box-pack: justify;
				    -webkit-justify-content: space-between;
				    justify-content: space-between;
				    -webkit-box-align: center;
				    -webkit-align-items: center;
				    align-items: center;
				}
				.mui-card-content {
				    font-size: 14px;
				    position: relative;
				}
				.pattern-list .mui-card-content-inner {
				    padding: 0;
				}
				.mui-card-content-inner {
				    position: relative;
				    padding: 15px;
				}
				.pattern-list .mui-card-content-inner p {
				    width: 90%;
				    margin: 2% 5%;
				    text-align: left;
				    white-space: nowrap;
				    overflow: hidden;
				    text-overflow: ellipsis;
				    color: #333;
				}
				p {
				    font-size: 14px;
				    margin-top: 0;
				    margin-bottom: 10px;
				    color: #8f8f94;
				}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"><img src="img/left_fri.png"/></a>
			<h1 class="mui-title">我的关注</h1>			
		</header>
		
		<div class="row">
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
         <img src="" class="active_img1" id="active_img">
        </a>
    </div>
</div>
			
			<script type="text/javascript">				
				$(function(){
					var id=window.localStorage.getItem('userid');
            var url="http://172.24.10.175/workout/api.php/get/mod/user/id/"+id+"/related/1/map/fanclub";
	//综合
	$.ajax({
		type : 'post',
		url : url,
		dataType: 'jsonp',
		success : function(data) {
//			alert(data.fanclub[0].thumb);
			    for (var i =0;i<data.fanclub.length;i++){                  
                var imgsrc='http://172.24.10.175/workout/Uploads/'+data.fanclub[i].thumb;
                var id=data.fanclub[i].id;
 
				$('.row').append("<a href='clubdetail.html?id="+id+"'><div class='col-sm-6 col-md-3'><img src="+imgsrc+">"+"<p>"+data.fanclub[i].club_name+"</p>"+"</div>"+"</a>");
                   }
	  }
	});
});
			</script>
	</body>
</html>
